<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FLIP 动画</title>
  <style>
   * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   }
   ul, li {
    list-style: none;
   }
   ul {
    width: 300px;
    margin:  20px 20px 0;
   }
   li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #7ef0a0;
    border-radius: 5px;
    margin-bottom: 10px;
   }
   li.active {
    background-color: #f99;
   }
   #btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: antiquewhite;
    margin-left: 20px;
    border: 1px solid rgb(212, 240, 58);
    padding: 0 10px;
    border-radius: 10px;
   }
  </style>
</head>
<body>
  <dl>
    <dt>实现步骤：</dt>
    <dd> Fist: 记录要监控的元素位置 </dd>
    <dd> Last: 记录元素结构变化后的位置 </dd>
    <dd> Invert: 移动元素到 First 的位置 </dd>
    <dd> Play: 开始执行动画</dd>
  </dl>
  <hr>
  <button id="btn">更改第一项的值</button>
  <ul id="list">
    <li class="list-item active">01</li>
    <li class="list-item">02</li>
    <li class="list-item">03</li>
    <li class="list-item">04</li>
    <li class="list-item">05</li>
  </ul>
  <script>
    const btn = document.querySelector('#btn');
    const list = document.querySelector('#list')
    const firstItem = document.querySelector('.list-item:first-child');
    const lastItem = document.querySelector('.list-child:last-child');
    
    function getLocation() {
      const rect = firstItem.getBoundingClientRect();
      return rect.top;
    }
    btn.onclick = () => {
      const start = getLocation();
      console.log('First: ' , start);
      list.insertBefore(firstItem, null);
      const end = getLocation();
      console.log('Last: ' , start);
      // delay(3000);  // 为什么加了 delay 后，会延迟？
      // 因为浏览器的渲染管线，有部分是在主线程上完成的， 但是
      // 主线程还在忙，就来不及渲染

      const dis = start - end;
      firstItem.style.transform = `translateY(${dis}px)`;
      console.log('Invert：', dis)  //  如果这时候点击的话，会发现第一个的位置是没有变化的

      ref(() => {
        firstItem.style.transition = 'transform 1s'
        firstItem.style.removeProperty('transform')
        console.log('play')
      })
    }

    function ref(callback) {
      requestAnimationFrame(() => {
        requestAnimationFrame(callback)
      })
    }

    function delay(duration = 1000) {
      const start = Date.now()
      while(Date.now() - start < duration) {}
    }
  </script>
</body>
</html>